<script setup lang="ts">
import { watch, ref } from 'vue'
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: String,
  strLength: {
    type: String,
    default() {
      return '18'
    },
  },
})
const value1 = ref('')
watch(
  () => props.modelValue,
  () => {
    value1.value = props.modelValue || ''
  },
  { immediate: true },
)
const clickInput = (e: any) => {
  const str = e.target.value
  if (str.length > props.strLength) {
    value1.value = str.substring(0, props.strLength)
  }
  emits('update:modelValue', value1.value)
}
</script>

<template>
  <div>
    <input class="riginalInput" style="width: 85%" @input="clickInput" v-model="value1" />
    <span style="float: left; color: red; padding-left: 4px" v-if="value1?.length <= 0"
      >不能为空</span
    >
    <span>
      <span class="zzjg_size12">{{ value1?.length }}</span>
      <span class="zzjg_size12">/{{ strLength }}</span>
    </span>
  </div>
</template>

<style lang="scss" scoped>
.riginalInput {
  float: left;
  width: 100%;
  outline: none;
  border: 0;
}
.zzjg_size12 {
  font-size: 12px;
}
</style>
